<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <script src='http://echarts.baidu.com/dist/echarts.min.js'></script>
  <script src='https://unpkg.com/axios/dist/axios.min.js'></script>
  <script src='https://cdn.bootcss.com/vue/2.6.8/vue.js'></script>
</head>

<body>
  <div id="test_chart">
    <div id='myChart' style='width: 600px;height:400px;'></div>
    <button id="btn" @click="get_data1">按钮1</button>
    <button id="btn" @click="get_data2">按钮2</button>

  </div>

  <div id="components-demo">
    <button-counter></button-counter>
  </div>

  <script type='text/javascript'>


// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' })





    // myChart.setOption(options)

    var vm = new Vue({
      el: '#test_chart',
      data: {
        api_url: '/test_chart',
        post_data: {
          "params": {
            "start_date": "2018-01-01",
            "end_date": "2019-01-01",
            "account_info": {
              "customer_equity": 1000,
              "usable_margin": 200,
              "unit": "万元"
            },
            "symbols": ["S5023650", "CB1 Comdty"],
            "position": [
              {
                "type": "现货",
                "xdata_code": "S5023650",
                "xdata_name": "广西南宁白砂糖现货价",
                "open_position": 12,
                "position_cost": 2333,
                "position_unit": "吨",
                "price_unit": "元"
              },
              {
                "type": "期货",
                "xdata_code": "CB1 Comdty",
                "xdata_name": "CZCE白砂糖00合约",
                "open_position": 12,
                "position_cost": 2323,
                "position_unit": "吨",
                "price_unit": "元"
              }
            ]
          }
        },
        resp: ""
      },

      methods: {
        get_data1() {
          axios.get(this.api_url)
            .then(function (resp) {
              let options = JSON.parse(resp.data)
              let myChart = echarts.init(document.getElementById('myChart'));
              myChart.setOption(options)
            })
            .catch(function (error) {
              self.fetchError = error
            })
        },
        get_data2() {
          axios.get(this.api_url)
            .then(
              (resp => {
                let options = JSON.parse(resp.data)
                let myChart = echarts.init(document.getElementById('myChart'));
                myChart.setOption(options)
              })
            )
            .catch(err => console.log(err))
        },
        get_data() {
          axios.post(this.api_url, this.post_data)
            .then((resp => {
              let data = JSON.parse(resp.data)
              this.$set(this.resp, 'data', data)
            }))
            .catch(err => console.log(err))
        }
      },
      created: function () {
        this.get_data1()
      }
    })

  </script>
</body>

</html>